<template>
    <div>
        <van-nav-bar title="注册页" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form>
            <van-cell-group inset>

                <van-field v-model="tel" name="tel" type="tel" label="手机号" placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填入手机号' }]" />

                <van-field v-model="sms" name="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
                    <template #button>
                        <van-button size="small" type="primary" color="red" @click="onClickbtn">发送验证码</van-button>
                    </template>
                </van-field>

                <van-field v-model="password" name="password" type="password" label="密码" placeholder='请输入密码'
                    :rules="[{ required: true, message: '请填入密码' }]" />

            </van-cell-group>
        </van-form>
        <van-popup v-model:show="show" :style="{ padding: '64px' }">验证码错误</van-popup>
        <van-popup v-model:show="show1" :style="{ padding: '64px' }">手机号已经注册</van-popup>
        <van-popup v-model:show="show2" :style="{ padding: '64px' }">请输入密码</van-popup>
        <van-button block class="btn" color="red" round type="default" @click="onSign">注册</van-button>
    </div>
</template>
    

<script lang="ts" setup>
import { ref } from 'vue';
import { ifcell, cell, iftelcode, sign } from '../api/user'
import { useRouter } from 'vue-router'
import request from '@/utils/request';

const tel = ref('');
const sms = ref('');
const password = ref('');
const show = ref(false);
const show1 = ref(false);
const show2= ref(false);
const router = useRouter();

const onClickLeft = () => history.back();


const onClickbtn = () => {
    console.log(tel.value)
    ifcell(tel.value).then(result => {
        console.log(result)
        if (result.code == '200') {
            cell(tel.value).then(result => {
                console.log(result)
            })
        } else {
            show1.value = true;
        }
    })

}

const onSign = () => {
    console.log(tel.value)
    console.log(sms.value)
    iftelcode(tel.value, sms.value).then(result => {
        console.log(result)
        if (result.code == '200') {
            if(password.value){
                  sign(tel.value, password.value).then(result => {
                router.push({ name: 'home' })
            })
        }else{
            show2.value = true;
        }
            }else{
                show.value=true;
            }
          

    })
}



</script>

<style scoped>
.btn {
    height: 25px;
    width: 8rem;
    margin: auto;
}
</style>